10 Design Guidelines for Reporting Errors in Forms表單錯誤報告

表單錯誤的有效處理能夠幫助使用者快速恢復操作。優秀的錯誤設計需清晰標識問題，並讓使用者輕鬆定位和修正欄位。

設計錯誤修正流程的原則

• 一個良好的錯誤處理流程需要：

• 錯誤資訊易於被使用者發現和理解。

• 錯誤欄位便於定位。

• 修正錯誤時，相關指引清晰可見。

以下是設計表單錯誤處理流程的具體指南

1. 優先使用即時驗證（Inline Validation）

概念：即時驗證是在使用者完成欄位輸入後，立即提示錯誤。

優點：使用者可以快速修正錯誤，無需返回檢查已填寫的欄位。

注意：若驗證需依賴伺服器處理，確保錯誤資訊清晰、易定位。

2. 對複雜欄位顯示成功狀態

應用場景：建立使用者名稱時顯示可用狀態（如綠色勾號）。輸入密碼時顯示密碼強度指標以幫助使用者調整輸入。

限制：不要對簡單欄位（如必填欄位）過度使用成功指示，以免幹擾使用者體驗。

3. 錯誤資訊需靠近相關欄位

實踐：錯誤訊息應顯示在欄位旁或下方，方便使用者檢視和修正。資訊需明確、禮貌、可讀，並給出建設性建議。

優點：減少使用者的記憶負擔，讓使用者在修正時無需回憶錯誤內容。

4. 使用顏色區分錯誤和正常狀態

推薦顏色：

建議：為錯誤欄位新增半透明背景色，方便在長表單中快速定位。

5. 新增圖示或輕微動畫以提升可見性

作用：圖示（如警告標誌）可幫助色盲使用者定位錯誤，增強可見性。

動畫使用建議：輕微動畫（如脈動效果）可吸引使用者注意力，但應避免文字動畫以免影響閱讀。

6. 謹慎使用模態視窗或確認對話方塊

適用場景：需要使用者特別關注的重要錯誤資訊。錯誤資訊簡單且允許使用者忽略時。

缺點：模態視窗中斷使用者流程，增加認知負擔。案例：Gmail提示使用者附件缺失的模態視窗，資訊簡單且支援繼續提交。

7. 避免在輸入未完成時驗證欄位

問題描述：過早驗證會打斷使用者的輸入流程，造成困擾。

案例：BestBuy表單在使用者填寫未完成時顯示錯誤資訊，幹擾操作。

建議：在使用者完成欄位輸入後再驗證。

8. 驗證摘要不能作為唯一錯誤指示

驗證摘要的作用：提供全域性錯誤概覽。通知使用者表單中有待修正的錯誤。

問題：驗證摘要強迫使用者搜尋錯誤欄位，增加記憶負擔。

最佳實踐：同時在錯誤欄位附近顯示具體錯誤資訊。

9. 避免使用工具提示顯示錯誤

問題描述：警告圖示難以注意，尤其在介面複雜時。

使用者需額外懸停或點選才能檢視錯誤資訊，增加操作成本。

案例：Facebook登入檔單要求點選警告圖示檢視問題，增加使用者操作負擔。

10. 為重複錯誤提供額外幫助

問題描述：當使用者在同一表單中反覆遇到錯誤（3次以上），表明介面設計存在深層問題。

改進措施：